.pdf-marking {
  // Vars

  // Support

  // Module
  & {
    //
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    user-select: none;

    .tool-box {
      background-color: red;
      flex-shrink: 0;
      position: relative;
      display: flex;
      align-items: center;

      &__item {
        padding: 5px 10px;
        border-radius: 5px;

        &:hover, &.active {
          background-color: #ccc;
          color: white;
        }
      }
    }

    .container-box {
      flex: 1;
      background-color: #f4f4f4;
      height: 0;
      position: relative;
      overflow: hidden;

      &__content {
        height: 100%;
        width: 100%;
        //overflow-y: auto;
        //overflow-x: hidden;
        overflow: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;

        .page {
          //outline: 1px solid red;
          position: relative;
          flex-shrink: 0;
          pointer-events: none;

          .img {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            //pointer-events: none;
            //box-shadow: 0 0 0 5px red inset;
          }

          .canvas {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
          }

          &__page-index {
            position: absolute;
            //left: 0;
            top: 30px;
            right: 30px;
            background-color: rgba(244, 244, 244, 0.8);
            font-size: 20px;
            width: 100px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            border-radius: 5px;
            //pointer-events: none;
          }
        }
      }
    }
  }

  // Facets

  // States
}
